<template>
    <el-main class="duration-700 dark:bg-gray-800 dark:text-white">
        <!--选项框-->
        <div>
            <ul>
                <li @click="page.setCourseContainer('logChose','线上学习')"
                    :class="[page.courseContainer.logChose === '线上学习'?'log-chose':'']">线上学习
                </li>
                <li v-if="!user.info.isTeacher" @click="page.setCourseContainer('logChose','作业')"
                    :class="[page.courseContainer.logChose === '作业'?'log-chose':'']">作业
                </li>
                <li v-if="user.info.isTeacher" @click="page.setCourseContainer('logChose','学生管理')"
                    :class="[page.courseContainer.logChose === '学生管理'?'log-chose':'']">学生管理
                </li>
                <li v-if="user.info.isTeacher" @click="page.setCourseContainer('logChose','作业发布')"
                    :class="[page.courseContainer.logChose === '作业发布'?'log-chose':'']">作业发布
                </li>
            </ul>
        </div>
        <!--线上学习模块-->
        <div v-show="page.courseContainer.logChose === '线上学习'"
             class="duration-700 flex justify-between">
            <!--目录-->
            <div class="flex-1 bg-white h-full divide-y divide-gray-600 divide-dashed dark:bg-gray-700 dark:text-white">
                <el-scrollbar>
                    <p>目录</p>
                    <div v-for="(index,item) in data" :key="index['unitName']">
                        <p @click="setIsItem(index['unitName'])">
                        <span class="name button">
                            {{ item + 1 + "  " + index['unitName'] }}
                        </span>
                        </p>
                    </div>
                </el-scrollbar>
            </div>
            <!--主要内容-->
            <div class="w-10/12 bg-white dark:bg-gray-700 dark:text-white h-full">
                <el-scrollbar>
                    <p v-if="user.info.isTeacher">
                        <span @click="setIsNewUnit" class="mx-2 button">
                            <el-button type="primary" plain round>添加单元</el-button>
                        </span>
                        <NewUnit v-show="isNewUnit" :setIsNewUnit="setIsNewUnit" :setData="setData"/>
                        <span @click="downloadAll" class="mx-2 button">
                            <el-button type="primary" plain round>一键导出</el-button>
                        </span>
                    </p>
                    <div v-for="(index,item) in data" :key="index['unitName']">
                        <p @click="setIsItem(index['unitName'])">
                            <el-icon :class="[isShow(index['unitName'])?'is-item-ico':'']">
                                <ArrowRightBold/>
                            </el-icon>
                            <span class="name">
                        <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="index['unitName']"
                                placement="bottom"
                        >
                            {{ item + 1 + "  " + index['unitName'] }}
                        </el-tooltip>
                    </span>
                            <el-icon
                                    v-if="user.info.isTeacher"
                                    @click.stop="all.setDialog('NewUnitFile');all.setCourseContainerInfo('unitName',index.unitName)">
                                <Plus/>
                            </el-icon>
                            <el-icon
                                    v-if="user.info.isTeacher"
                                    @click.stop="delUnit(item)">
                                <Delete/>
                            </el-icon>
                        </p>
                        <p v-for="(index_a,item_a) in index['file']" v-show="isShow(index['unitName'])">
                        <span class="name" @click.stop="openNewTab(index_a.url)">
                            <el-tooltip
                                    class="box-item"
                                    effect="dark"
                                    :content="index_a.name"
                                    placement="bottom"
                            >
                                {{ index_a.name }}
                            </el-tooltip>
                        </span>
                            <el-icon
                                    v-if="user.info.isTeacher"
                                    @click.stop="delUnit(item,item_a)"
                            >
                                <Delete/>
                            </el-icon>
                        </p>
                    </div>
                </el-scrollbar>
            </div>
            <NewUnitFile v-show="all.dialog==='NewUnitFile'" :setData="setData"/>
        </div>
        <!--学生管理模块-->
        <div v-show="page.courseContainer.logChose === '学生管理'"
             class="bg-white duration-700 dark:bg-gray-700 dark:text-white ">
            <p>
                <span @click="setIsNewStudents">
                    <el-button type="primary" plain round>添加学生</el-button>
                </span>
                <NewStudents v-show="all.dialog==='NewStudents'"/>
                <span v-show="multipleSelection.length" @click="delStudent">
                    <el-button type="danger" plain round>移除学生</el-button>
                </span>
            </p>
            <el-table
                    :data="all.courseContainerInfo.studentsInfo"
                    height="98%"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="studentId" label="学号" width="180"/>
                <el-table-column prop="studentName" label="姓名" width="180"/>
                <el-table-column
                        prop="studentClass"
                        label="班级"
                        :filters="all.courseContainerInfo.filters"
                        :filter-method="filterTag"
                        sortable
                />
            </el-table>
        </div>
        <!--作业发布-->
        <div v-show="page.courseContainer.logChose === '作业发布'&&user.info.isTeacher"
             class="bg-white duration-700 dark:bg-gray-700 dark:text-white p-4">
            <p v-show="!homeworkNum">
                <span @click="newHomeworkDialogVisible = true;isNewHomework=true">
                    <el-button type="primary" plain round>发布作业</el-button>
                </span>
                <el-dialog v-model="newHomeworkDialogVisible" :title="isNewHomework?'发布作业':'修改作业'" width="30%"
                           center>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">作业名称</span>
                    <el-input
                            v-model="newHomeworkForm.homework_name"
                            class="w-50 m-2"
                            placeholder="请输入作业名称(必填)"
                    />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">作业简介</span>
                    <el-input
                            v-model="newHomeworkForm.introduce"
                            class="w-50 m-2"
                            placeholder="请输入作业简介"
                    />
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">最多提交次数</span><br>
                    <el-input-number
                            v-model="newHomeworkForm.nt"
                            :min="1"
                            :max="100"
                            class="m-2"
                    />
                    <div class="ml-3 w-35 text-gray-600 items-center">起止时间</div>
                    <div class="m-2">
                        <el-date-picker
                                v-model="newHomeworkForm.time"
                                type="datetimerange"
                                format="YYYY/MM/DD HH:mm:ss"
                                value-format="x"
                                range-separator="到"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                        />
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="newHomeworkDialogVisible = false">关闭</el-button>
                            <el-button type="primary" @click="newHomeworkApi()" v-show="isNewHomework">
                                发布
                            </el-button>
                            <el-button type="primary" @click="putHomework(1)" v-show="!isNewHomework">
                                修改
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </p>
            <el-scrollbar height="700px" class="flex flex-col" v-show="!homeworkNum">
                <div class="bg-gray-100 my-3 h-24 pl-5 py-1.5 homework" v-for="(index,item) in homeworkData">
                    <span class="text-xl">{{ index.name }}</span><br>
                    <span>时间: {{ index.start + " ~ " + index.end }}</span><br>
                    <span>要求: {{ index.introduce === null ? "---" : index.introduce }}</span>
                    <span class="put-homework" @click="putHomework(0,index.id)"><el-icon size="25"><EditPen/></el-icon>修改</span>
                    <span class="details" @click="openHomework(item,index.id)"><el-icon size="25"><View/></el-icon>查看</span>
                    <span class="del-homework" @click="delHomework(index.id)"><el-icon size="25"><Delete/></el-icon>删除</span>
                    <span class="state"
                          :style="{color:(index.state === '进行中' ? '#4f95f5' : '#8d8d8d')}">{{ index.state }}</span>
                </div>
            </el-scrollbar>
            <p v-show="homeworkNum">
                <span @click="returnHomeworks()">
                    <el-button type="primary" plain round>返回</el-button>
                </span>
                <span @click="modelDialogVisible = true">
                    <el-button type="primary" plain round>上传答案</el-button>
                    <el-dialog v-model="modelDialogVisible" title="评估测试集" width="30%" center>
                        <el-upload
                                class="upload-demo"
                                drag
                                :action="server.ghyComputerIp+'homework/upload_test'"
                                multiple
                                :data="uploadData"
                                :headers="headers"
                        >
                            <el-icon class="el-icon--upload"><upload-filled/></el-icon>
                            <div class="el-upload__text">
                                拖动文件或者 <em>点击此处</em>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    该答案用于后台评分, 学生无法获取该答案
                                </div>
                            </template>
                        </el-upload>
                    </el-dialog>
                </span>
                <span @click="scoreDialogVisible = true">
                    <el-button type="primary" plain round>进行评分</el-button>
                    <el-dialog v-model="scoreDialogVisible" title="进行评分" width="30%"
                               center>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">最高分</span><br>
                    <el-input-number
                            v-model="scoreData.max_score"
                            :min="1"
                            :max="100"
                            class="m-2"
                    />
                    <br>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">中间分</span><br>
                    <el-input-number
                            v-model="scoreData.mid_score"
                            :min="0"
                            :max="99"
                            class="m-2"
                    />
                    <br>
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">最低分</span><br>
                    <el-input-number
                            v-model="scoreData.min_score"
                            :min="0"
                            :max="99"
                            class="m-2"
                    />
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click.stop="scoreDialogVisible = false">关闭</el-button>
                            <el-button type="primary" @click.stop="score()">
                                评分
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
                </span>
                <span v-show="homeworkMultipleSelection.length" @click="exportStudentsData">
                    <el-button type="primary" plain round>导出选中学生数据</el-button>
                </span>
            </p>
            <el-table
                    :data="homeworkData[homeworkNum]['students']"
                    height="98%"
                    style="width: 100%"
                    @selection-change="homeworkHandleSelectionChange"
                    v-if="homeworkNum&&homeworkData.length!==0"
            >
                <el-table-column type="selection"/>
                <el-table-column prop="studentId" label="学号" sortable/>
                <el-table-column prop="studentName" label="姓名" sortable/>
                <el-table-column
                        prop="studentClass"
                        label="班级"
                        :filters="all.courseContainerInfo.filters"
                        :filter-method="filterTag"
                        sortable
                />
                <el-table-column prop="nt" label="提交次数" sortable/>
                <el-table-column
                        prop="result"
                        label="准确率"
                        sortable
                        :sort-method="(a, b) => { return sortPercentMethod(a, b, 'percent') }"
                />
                <el-table-column prop="score" label="分数" sortable/>
            </el-table>
        </div>
        <!--学生作业-->
        <div v-show="page.courseContainer.logChose === '作业'"
             class="bg-white duration-700 dark:bg-gray-700 dark:text-white p-4"
        >
            <el-scrollbar height="700px" class="flex flex-col" v-show="!homeworkNum">
                <div class="bg-gray-100 my-3 h-36 pl-5 py-1.5 homework" v-for="index in studentHomeworkData">
                    <span class="text-xl">{{ index.name }}</span><br>
                    <span>时间: {{ index.start + " ~ " + index.end }}</span><br>
                    <span>要求: {{ index.introduce === null ? "---" : index.introduce }}</span><br>
                    <span>最佳准确率: {{ index.result === null ? "---" : index.result }}</span><br>
                    <span>评分: {{ index.score === null ? "---" : index.score }}</span>
                    <el-upload
                            v-show="index.template"
                            class="upload-demo"
                            :action="server.ghyComputerIp+'student/homework'"
                            multiple
                            :data="accuracyUploadData"
                            :headers="headers"
                            :on-success="accuracyUploadSuccess"
                    >
                        <span class="details" @click="accuracyUploadData.homework_id = index.id"><el-icon size="25"><Aim/></el-icon>上传答案</span>
                    </el-upload>
                    <a v-show="index.template" :href="index.url" download=""><el-icon size="25"><Download/></el-icon>模板下载</a>
                    <span class="state"
                          :style="{color:(index.state === '进行中' ? '#4f95f5' : '#8d8d8d')}">{{ index.state }}</span>
                </div>
            </el-scrollbar>
        </div>
    </el-main>
</template>

<script setup>
import { usePageStore } from "@/stores/page/page";
import workApi from "@/http/work/workApi";
import { computed, reactive, ref } from "vue";
import NewUnit from "@/components/dialog/NewUnit.vue";
import { useAllStore } from "@/stores/all";
import NewUnitFile from "@/components/dialog/NewUnitFile.vue";
import NewStudents from "@/components/dialog/NewStudents.vue";
import { useDarkStore } from "@/stores/darkMode/darkMode";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/stores/user/user";
import router from "@/router";
import { useRoute } from "vue-router";
import { useServerStore } from "@/stores/server/server";

const server = useServerStore()
const route = useRoute()
const dark = useDarkStore()
const all = useAllStore()
const page = usePageStore()
const user = useUserStore()
// 获取该课程的单元信息
const data = ref([])

// 获取该课程单元信息
function getCourseInfo() {
    if (user.info.isTeacher) {
        workApi.get("/teacher/subject_unit", {
            params: {
                subject_name: all.courseContainerInfo.name,
            }
        }).then((res) => {
            data.value = res.data[0].unit
        });
    } else {
        workApi.get("/student/subject_unit", {
            params: {
                subject_id: all.courseContainerInfo.id
            }
        }).then((res) => {
            data.value = res.data[0].unit
        });
    }
}

getCourseInfo()

function setData(value) {
    data.value = value
}

// 点击单元展开

let isItem = reactive([])

function setIsItem(item) {
    for (let i = 0; i <= isItem.length; i++) {
        if (item === isItem[i]) {
            isItem.splice(i, 1)
            return
        }
    }
    isItem.push(item)
}

const isShow = computed(() => item => {
    for (let i = 0; i <= isItem.length; i++) {
        if (item === isItem[i]) {
            return true
        }
    }
    return false
})
// 新建单元对话框
let isNewUnit = ref(false)

// 一键导出
function downloadAll() {
    ElMessage({
        message: '正在打包中,请耐心等待....',
        type: 'success',
    })
    workApi.post("teacher/zip_subject", {
        subject_name: all.courseContainerInfo.name
    }).then((res) => {
        console.log(res)
        let a = document.createElement("a"); //创建一个<a></a>标签
        a.href = res['url']; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
        a.download = res["name"]; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
        a.style.display = "none"; // 障眼法藏起来a标签
        document.body.appendChild(a); // 将a标签追加到文档对象中
        a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
        a.remove(); // 一次性的，用完就删除a标签
    })
}

function setIsNewUnit() {
    isNewUnit.value = !isNewUnit.value
}

function setIsNewStudents() {
    all.setDialog("NewStudents")
}

function openNewTab(url) {
    window.open(url)
}

// 删除单元或者素材
function delUnit(num, num_a) {
    workApi.delete("teacher/delete_unit", {
        data: {
            subject_name: all.courseContainerInfo.name,
            unit_id: num,
            file_id: num_a
        }
    }).then((res) => {
        data.value = res.data[0].unit
    })
}


function getStudentsInfo() {
    if (user.info.isTeacher) {
        workApi.get("/teacher/subject_student", {
            params: {
                subject_name: all.courseContainerInfo.name,
                subject_id: all.courseContainerInfo.id
            }
        }).then((res) => {
            all.setCourseContainerInfo("studentsInfo", res.data["students"])
            all.setCourseContainerInfo("filters", res.data["filters"])
        });
    }
}

// 勾选学生
const multipleSelection = ref([])
const homeworkMultipleSelection = ref([])

function handleSelectionChange(val) {
    multipleSelection.value = val
}
function homeworkHandleSelectionChange(val) {
    homeworkMultipleSelection.value = val
}

function delStudent() {
    ElMessage({
        message: '等待删除中',
        type: 'warning',
    })
    workApi.delete("teacher/delete_student", {
        data: {
            subject_name: all.courseContainerInfo.name,
            student: multipleSelection.value
        }
    }).then((res) => {
        all.setCourseContainerInfo("studentsInfo", res.data["students"])
        all.setCourseContainerInfo("filters", res.data["filters"])
    })
}

// 筛选班级
function filterTag(value, row) {
    return row.studentClass === value
}
// 准确率百分数排序
function sortPercentMethod(obj1, obj2, prop) {
    let v1 = parseFloat(obj1[prop]);
    let v2 = parseFloat(obj2[prop]);
    return v1 - v2;
}
getStudentsInfo()

// 发布作业
const newHomeworkDialogVisible = ref(false)
const newHomeworkForm = reactive({
    subject_name: all.courseContainerInfo.name,
    subject_id: all.courseContainerInfo.id,
    homework_name: "",
    introduce: "",
    nt: 5,
    time: ""
})
const homeworkData = ref([])
const homeworkNum = ref(route.query.homeworkNum)
const isNewHomework = ref(true)
const putId = ref("")
if (homeworkNum.value) {
    page.setCourseContainer('logChose', '作业发布')
}

function getHomeworkApi() {
    workApi.get("homework/register", {
        params: {
            subject_name: all.courseContainerInfo.name,
            subject_id: all.courseContainerInfo.id,
        }
    }).then((res) => {
        homeworkData.value = res.data["homework"]
    })
}

function newHomeworkApi() {
    if (!newHomeworkForm.homework_name || !newHomeworkForm.time) {
        ElMessage.error('课程名称与时间不能为空');
        return
    }
    newHomeworkDialogVisible.value = false;
    workApi.post("homework/register", newHomeworkForm).then((res) => {
        newHomeworkForm.homework_name = ""
        newHomeworkForm.time = ""
        homeworkData.value = res.data['homework']
    })
}

function openHomework(Num, id) {
    router.push({
        name: "CourseInfo",
        query: {
            name: all.courseContainerInfo.name,
            id: all.courseContainerInfo.id,
            homeworkNum: Num
        }
    }).then(() => {
        homeworkNum.value = route.query.homeworkNum
    })
    uploadData.homework_id = id
}

function delHomework(id) {
    workApi.delete("homework/register", {
        data: {
            id: id
        }
    }).then((res) => {
        homeworkData.value = res.data['homework']
    })
}

function putHomework(type, id) {
    if (type) {
        newHomeworkDialogVisible.value = false
        workApi.put("homework/register", {
            id: putId.value,
            ...newHomeworkForm
        }).then((res) => {
            homeworkData.value = res.data['homework']
        });
        newHomeworkForm.id = ""
        newHomeworkForm.homework_name = ""
        newHomeworkForm.time = ""
    } else {
        putId.value = id
        newHomeworkDialogVisible.value = true;
        isNewHomework.value = false
    }

}

function returnHomeworks() {
    router.push({
        name: "CourseInfo",
        query: {
            name: all.courseContainerInfo.name,
        }
    }).then(() => {
        homeworkNum.value = undefined
    })
}

// 上传模板
const modelDialogVisible = ref(false)
const headers = {
    "token": localStorage.getItem('token')
}
const uploadData = reactive({
    subject_id: all.courseContainerInfo.id,
    homework_id: ""
})


// 学生作业
const studentHomeworkData = ref("")
const accuracyUploadData = reactive({
    subject_id: all.courseContainerInfo.id,
    homework_id: ""
})

function getStudentHomework() {
    workApi.get("student/homework", {
        params: {
            subject_id: all.courseContainerInfo.id
        }
    }).then((res) => {
        studentHomeworkData.value = res.data['homework']
    })
}

// 上传准确率测试后弹窗
function accuracyUploadSuccess(res) {
    ElMessageBox.alert(res.data.tip, 'Title', {
        confirmButtonText: 'OK',
        callback: () => {
            getStudentHomework()
            console.log(res)
        },
    })

}
const scoreDialogVisible = ref(false)
const scoreData = reactive({
    max_score:100,
    mid_score:80,
    min_score:50
})
function score() {
    workApi.post("homework/scores", {
        homework_id: homeworkData.value[homeworkNum.value].id,
        ...scoreData
    }).then((res) => {
        homeworkData.value[homeworkNum.value]['students'] = res.data['homework']
    })
    scoreDialogVisible.value = false
}

function exportStudentsData() {
    workApi.post("homework/scores_csv", {
        data: homeworkMultipleSelection.value,
        homework_id: homeworkData.value[homeworkNum.value].id
    }).then((res) => {
        // 创建a标签
        let a = document.createElement("a");
        a.download ='成绩导出.csv';
        // 创建二进制对象
        const blob = new Blob([res]);
        const downloadURL = (window.URL || window.webkitURL).createObjectURL(blob);
        a.href = downloadURL;

        // 模拟点击
        a.click();

        //释放资源并删除创建的a标签
        URL.revokeObjectURL(downloadURL);// a.href
        document.body.removeChild(a);
    });
}
user.info.isTeacher ? getHomeworkApi() : getStudentHomework();

</script>

<style scoped lang="less">
.el-main {
  background-color: #f5f5f5;
  user-select: none;

  > div:nth-child(1) {
    ul {
      display: flex;
      align-items: center;
      height: 61px;

      li {
        height: 30px;
        padding: 0 10px;
        border: 1px solid #dddddd;
        line-height: 30px;
        cursor: pointer;
      }

      .log-chose {
        color: #4f95f5;
        border: 1px solid #4f95f5;
      }
    }
  }

  > div:nth-child(n+2) {
    width: 100%;
    height: 90%;

    > p {
      margin-bottom: 20px;

      span {
        margin-right: 30px;

      }
    }

  }

  //课线上学习
  > div:nth-child(2) {
    > div {
      padding: 0 2%;
      margin: 0 0.7% 0 0;
      line-height: 50px;

      p:nth-child(1) {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;

        .el-icon {
          margin-right: 15px;
        }

        .el-icon:nth-child(1) {
          margin-right: 10px;
          transition: 0.2s;
        }

        .is-item-ico {
          transform: rotate(90deg);
        }

        .name {
          width: 200px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      p:nth-child(n+2) {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        padding-left: 50px;
        transition: 300ms;

        .name {
          display: inline-block;
          width: 207px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        &:hover {
          color: #4f95f5;
        }
      }
    }
  }

  //学生管理
  > div:nth-child(3) {
    height: 93%;
    padding: 30px;
  }

  // 作业发布
  > div:nth-child(4) {
    .homework {
      position: relative;

      .details {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 60%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: #4f95f5;
        }
      }

      .del-homework {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 65%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: red;
        }
      }

      .put-homework {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 55%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: #67c23a;
        }
      }

      .state {
        display: inline-block;
        position: absolute;
        top: 38%;
        right: 5%;
        font-weight: bold;
      }
    }

  }

  > div:nth-child(5) {
    .homework {
      position: relative;

      .details {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 60%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: #4f95f5;
        }
      }
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 70%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: #4f95f5;
        }
      }

      .del-homework {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 65%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: red;
        }
      }

      .put-homework {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 30%;
        left: 55%;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
          color: #67c23a;
        }
      }

      .state {
        display: inline-block;
        position: absolute;
        top: 38%;
        right: 5%;
        font-weight: bold;
      }
    }
  }
}


.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>